<script setup lang="ts">
import { ref } from 'vue'
import * as video from '@/apis/video'
// const list = ref<any[]>([])
import { useWatchHistry, type typeWatchHistry } from '@/store/watchHistry'

const watchHistry = useWatchHistry()
watchHistry.setListFromServe()
// video.getVideoHistry().then(res => {
//   list.value = res.data.list
//   console.log(res.data)
// })
</script>

<template>
  <div class="box">
    <h2>观看历史</h2>

    <div style="margin-top: 20px;">
      <el-empty description="暂无历史" v-if="JSON.stringify(watchHistry.getList) == '{}'" />
      <div>
        <el-timeline>
          <template v-for="v in watchHistry.getList" :key="v.name">
            <el-timeline-item v-if="v.list.length > 0" :timestamp="v.name" placement="top">
              <div style="display: flex;align-items: center;flex-wrap: wrap;">
                <router-link v-for="info in v.list" :key="info.vod_id" target="_blank" :to="`/play/${info.vod_id}?episode=${info.episode}`">
                  <div class="videoCard">
                    <el-image :src="info.vod_img" fit="cover" />
                    <div class="videoCard-vBox">
                      <p class="videoCard-vBox-title">{{ info.vod_name }}</p>
                      <p>{{ info.episode_name }} 观看至{{ ((info.currentTime / info.duration) * 100).toFixed(0) }}%</p>
                    </div>
                  </div>
                </router-link>
              </div>
            </el-timeline-item>
          </template>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.videoCard {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  margin-right: 10px;
  cursor: pointer;
  padding: 5px 10px 5px 5px;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
  }

  .el-image {
    width: 65px;
    height: 80px;
    border-radius: 10px;
    margin-right: 10px;
  }
  &-vBox {
    color: #999;

    &-title {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 20px;
      width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff;
    }
  }
}

.box {
  background: rgb(30, 30, 36);
  width: 100%;
  border-radius: 5px;
  padding: 20px;
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
}
</style>
